<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 在表达式中调用方法来达到同样的效果： -->
        <p>Reversed message: "{{ reversedMessage() }}"</p>
        <p> {{ now }} </p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const rw = new Vue({
        el:"#app",
        data:{
            message:"岁岁平安"
        },
        // 将文字反转的方法
        methods: {
            reversedMessage: function () {
            return this.message.split('').reverse().join('')
            }
        },
        // 每当触发重新渲染时，调用方法将总会再次执行函数。

        
        // 利用计算属性获取当前日期
        computed: {
            now: function () {
                return Date.now()
            }
        }
        // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
    })
</script>
</html>